﻿
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
	<title>Traffic Info</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/plugins/leaflet.css" />
	<link rel="stylesheet" href="css/plugins/L.Control.Locate.css" />
	<link rel="stylesheet" href="css/plugins/Control.MiniMap.css">
	<link rel="stylesheet" href="css/plugins/jquery-ui.css">
	<link rel="stylesheet" href="css/plugins/leaflet.contextmenu.css">
	<link rel="stylesheet" href="css/plugins/leaflet.usermarker.css">
	<link rel="stylesheet" href="css/main.css">
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/plugins/leaflet.ie.css" />
	<link rel="stylesheet" href="css/plugins/L.Control.Locate.ie.css"/>
	<![endif]-->
	<script type="text/javascript" src="js/lib/jquery-1.10.2.js"></script>
	<script type="text/javascript">
	// $(function() {
	// 	window.addEventListener('load', function(e) {
 //  			window.applicationCache.addEventListener('updateready', function(e) {
 //   				if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
 //     	      			if (confirm('A new version of this site is available. Load it?')) {
 //       				window.location.reload();
 //     				}
 //   			 	}
 //  			}, false);

	// 	}, false);	
	// });
	</script>
	<script src="js/plugins/jquery-ui.js"></script>
	<script type="text/javascript" src="js/plugins/html5slider.js"></script>



		
		<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
        <link rel="stylesheet" href="css/font-awesome.min.css" />

		<!-- jQueryMobileCSS - original without styling -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />

		<!-- nativeDroid core CSS -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

		<!-- nativeDroid: Light/Dark -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.dark.css"  id='jQMnDTheme' />

		<!-- nativeDroid: Color Schemes -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.green.css" id='jQMnDColor' />

		<!-- jQuery / jQueryMobile Scripts -->
		<!--
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

        <style type="text/css">
            .a-left{
                display: inline-block;
                min-width: 200px;"
            }
        </style>

</head>
<body>
	<!-- Web design for none mobile device -->
	<section id="wrapper-none-mobile">
		<div class="Map-Container">
			<div id="MainMap"></div>
			<script src="js/lib/leaflet-src.js"></script>
			<script src="js/plugins/L.Control.Locate.js" ></script>
			<script src="js/plugins/Control.MiniMap.js" ></script>
			<script src="js/plugins/leaflet.contextmenu.js"></script>
			<script src="js/plugins/leaflet.usermarker.js"></script>
			<script src="js/map.js"></script>			
		</div>
	</section>
	<!-- End web main interface -->
	

    <!-- panel search -->
    <div data-role="panel" data-display="push" id="panel-search" data-theme="b">
        <ul data-role="listview">
            <li>Tìm địa điểm</li>

            <li data-icon='false' data-role="fieldcontain">                    
                        <select name="select-choice-1" id="select-choice-1b" data-native-menu="true">
                            <option value="javascript">Chọn địa điểm</option>
                            <option value="css">CSS</option>
                            <option value="html">HTML</option>
                            <option value="csharp">C#</option>
                            <option value="java">Java</option>
                        </select>
			</li>

            <li data-icon='false' data-role="fieldcontain">
                        <select name="select-choice-1" id="select-choice-1b" data-native-menu="true">
                            <option value="javascript">Phạm vi tìm kiếm</option>
                            <option value="css">CSS</option>
                            <option value="html">HTML</option>
                            <option value="csharp">C#</option>
                            <option value="java">Java</option>
                        </select>
			</li>

            <li>
						<button type="submit" data-inline='true'><i class='lIcon fa fa-search'></i>Tìm</button>
						<button type="reset" data-inline='true'><i class='lIcon fa fa-times'></i>Bỏ qua</button>
            </li>
        </ul>
    </div>


    <!-- panel street -->
    <div data-role="panel" data-display="push" id="panel-street" data-theme="b">
        <ul data-role="listview">
            <li>Tìm chỉ đường</li>
            <li>
            	<button data-inline='true'><i class='lIcon fa fa-car'></i></button>
            	<button data-inline='true'><i class='lIcon fa fa-male'></i></button>
            	<button data-inline='true'><i class='lIcon fa fa-search'></i></button>
            </li>

            <li data-icon='false' data-role="fieldcontain">                  
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Điểm xuất phát">
			</li>

            <li data-icon='false' data-role="fieldcontain">                    
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Điểm đến">
			</li>			

            <li>
						<button type="submit" data-inline='true'><i class='lIcon fa fa-search'></i>Tìm</button>
						<button type="reset" data-inline='true'><i class='lIcon fa fa-times'></i>Bỏ qua</button>
            </li>
        </ul>
    </div>


    <!-- panel share -->
    <div data-role="panel" data-display="push" id="panel-share" data-theme="b">
        <ul data-role="listview">
            <li>Chia sẻ</li>

            <!-- radio share -->
            <li data-icon='false' data-role="fieldcontain">                  
                <fieldset data-role="controlgroup">

                	<input type="radio" name="radio-share" id="radio-warning" value="warning" checked="checked">
                 	<label for="radio-warning">Cảnh báo</label>

                    <input type="radio" name="radio-share" id="radio-address" value="address">
                    <label for="radio-address">Địa điểm</label>

                </fieldset>
			</li>

            <!-- select share -->
            <li id="icons-warning" data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-choice-a" id="radio-choice-ab" value="choice-a" checked="checked">
                    <label for="radio-choice-ab"><i class='lIcon fa fa-car'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-bb" value="choice-b">
                    <label for="radio-choice-bb"><i class='lIcon fa fa-car'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-cb" value="choice-c">
                    <label for="radio-choice-cb"><i class='lIcon fa fa-car'></i></label>
                </fieldset>
            </li>

            <li style='display: none' id="icons-address" data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-choice-a" id="radio-choice-ab" value="choice-a" checked="checked">
                    <label for="radio-choice-ab"><i class='lIcon fa fa-male'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-bb" value="choice-b">
                    <label for="radio-choice-bb"><i class='lIcon fa fa-male'></i></label>

                    <input type="radio" name="radio-choice-a" id="radio-choice-cb" value="choice-c">
                    <label for="radio-choice-cb"><i class='lIcon fa fa-male'></i></label>
                </fieldset>
            </li>            


            <li data-icon='false' data-role="fieldcontain">                    
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Tên địa điểm">
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Mô tả">
                <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Tag người">
			</li>

            <li data-icon='false' data-role="fieldcontain">                    
                <button type="submit" data-inline='true'><i class='lIcon fa fa-film'></i></button>
                <button type="submit" data-inline='true'><i class='lIcon fa fa-file-photo-o'></i></button>
            </li>

            <li>
					<button type="submit" data-inline='true'><i class='lIcon fa fa-share'></i>Chia sẻ</button>
            </li>
        </ul>
    </div>


    <!-- panel friends -->
    <div data-role="panel" data-display="push" id="panel-friends" data-theme="b">
        <ul data-role="listview">
            <li>Bạn bè</li>

            <!-- select friend -->
            <li data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-friend" id="radio-friend-list" value="friend-list" checked="checked">
                    <label for="radio-friend-list"><i class='lIcon fa fa-user'></i></label>

                    <input type="radio" name="radio-friend" id="radio-group-list" value="group-list">
                    <label for="radio-group-list"><i class='lIcon fa fa-group'></i></label>

                    <input type="radio" name="radio-friend" id="radio-required-list" value="required-list">
                    <label for="radio-required-list"><i class='lIcon fa fa-plus'></i></label>
                </fieldset>
            </li>

        </ul>


        <ul id="friend-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider">Danh sách bạn bè <span class="ui-li-count">2</span></li>
            <li>
                <img src="images/users/rooney.jpg">
                <h2><a href='#'>Rooney</a></h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <img src="images/users/schole.jpg">
                <h2><a href='#'>Paul schole</a></h2>
            </li>
        </ul>

        <ul style='display: none' id="group-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider">Danh sách nhóm <span class="ui-li-count">2</span></li>
            <li>
                <img src="images/groups/bk.jpg">
                <h2><a href='#'>Bách Khoa HCM</a></h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <img src="images/groups/cse.jpg">
                <h2><a href='#'>Khoa CNTT</a></h2>
            </li>
        </ul>

        <ul style='display: none' id="required-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider">Danh sách kết bạn <span class="ui-li-count">2</span></li>
            <li>
                <img src="images/users/ronaldo.jpg">
                <h2>
                    <a href='#'>Ronaldo</a> 
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-plus'></i>
                    </button>
                </h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <img src="images/users/Persie.jpg">
                <h2>
                    <a href='#'>Persie</a> 
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-plus'></i>
                    </button>
                </h2>
            </li>
        </ul>             
    </div>


    <!-- panel profile -->
    <div data-role="panel" data-display="push" id="panel-profile" data-theme="b">
        <ul data-role="listview">
            <li>Bạn bè</li>

            <!-- select friend -->
            <li data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                
                    <input type="radio" name="radio-profile" id="radio-position" value="position-list" checked="checked">
                    <label for="radio-position">Vị trí</label>

                    <input type="radio" name="radio-profile" id="radio-journey" value="journey-list">
                    <label for="radio-journey">Hành trình</label>

                </fieldset>
            </li>

        </ul>


        <ul id="position-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider"><span class="ui-li-count">2</span></li>
            <li>
                <h2>
                    <a class="a-left" href='#'>Vị trí 1</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <h2>
                    <a class="a-left" href='#'>Vị trí 1</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>
        </ul>

        <ul style='display: none' id="journey-list" data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
            <li data-role="list-divider"><span class="ui-li-count">2</span></li>
            <li>
                <h2>
                    <a class="a-left" href='#'>Hành trình 1</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>

            <li data-role="list-divider"></li>

            <li>
                <h2>
                    <a class="a-left" href='#'>Hành trình 2</a>
                    <button type="submit" data-inline='true'>
                        <i class='lIcon fa fa-share'></i>
                    </button>
                </h2>
            </li>
        </ul>             
    </div>

    <!-- footer -->
    <div data-position="fixed" data-tap-toggle="false" data-role="footer" data-tap-toggle="false" data-theme='b'>
        <div data-role="navbar">
            <ul>
                <li>
                	<a href="#panel-search">
                		<i class="blIcon fa fa-search"></i>
                		Tìm địa điểm
                	</a>
                </li>

                <li>
                	<a href="#panel-street" data-iconpos='right'>
                		<i class='blIcon fa fa-retweet'></i>
                		Tìm chỉ đường
                	</a>
                </li>

                <li>
                    <a href="#panel-share">
                        <i class='blIcon fa fa-share'></i>
                        Chia sẻ
                    </a>
                </li>

                <li>
                    <a href="#panel-friends">
                        <i class='blIcon fa fa-users'></i>
                        Bạn bè
                    </a>
                </li>

                <li>
                    <a href="#panel-profile">
                        <i class='blIcon fa fa-file-archive-o'></i>
                        Cá nhân
                    </a>
                </li>

            </ul>
        </div>
    </div>


    <div data-role='popup' id='search' data-theme='b'>
        <div data-role='header' data-theme='b'>
            <h1>Delete from library?</h1>
        </div>
        <div data-role='content' data-theme='b'>
            <form>
                <textarea cols="40" rows="8" name="textarea2" id="textarea2b" placeholder="This is a textarea" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 53px;"></textarea>
                <div class='showastabs center nobg'>
                    <a href='#' data-rel='back' data-icon='ok' data-iconpos='left' data-role='button' data-inline='true'>Okay</a>
                    <a href='#' data-rel='back' data-icon='delete' data-iconpos='left' data-role='button' data-inline='true'>Cancel</a>
                </div>
            </form>
        </div>
    </div>



    <!--
	<script src="js/itsmenu.js"></script>
-->


    <script type="text/javascript">
        $(document).ready(function() {
            

            $('input[type=radio][name=radio-share]').change(function() {
                if (this.value == 'warning') {
                        $("#icons-warning").show();
                        $("#icons-address").hide();
                }
                else if (this.value == 'address') {
                         $("#icons-address").show();
                        $("#icons-warning").hide();
                }
            });


            $('input[type=radio][name=radio-friend]').change(function() {
                if (this.value == 'friend-list') {

                        $("#friend-list").show();
                        $("#group-list").hide();
                        $("#required-list").hide();
                }
                else if (this.value == 'group-list') {

                        $("#friend-list").hide();
                        $("#group-list").show();
                        $("#required-list").hide();
                }
                else if (this.value == 'required-list') {

                        $("#friend-list").hide();
                        $("#group-list").hide();
                        $("#required-list").show();
                }                
            });

            
            $('input[type=radio][name=radio-profile]').change(function() {
                if (this.value == 'position-list') {

                        $("#position-list").show();
                        $("#journey-list").hide();
                }
                else if (this.value == 'journey-list') {

                        $("#journey-list").show();
                        $("#position-list").hide();
                }
            });


        });// end ready
    </script>


    <script src="js/main.js"></script>
    <script src="js/datacollection.js"></script>
</body>
</html>